<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todoList</title>
    <style>
        .completed{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<!--v-bind:class 等价于:class-->
<div id="app">
    <task-app :list="tasks"></task-app>
</div>

<template id="template-task">
    <div>
        <h1>My tasks
            <span v-show="remaining">{{remaining}}</span>
        </h1>
        <ul>
            <li
                    @click="toggleTask(item)"
                    :class="{'completed':item.completed}"
                    v-for="item in list">
                {{item.body}}
                <strong @click="deleteTask(item)">X</strong>
            </li>
        </ul>
    </div>

</template>

<script src="vue/vue.js"></script>
<script>

    Vue.component('task-app',{
        template:"#template-task",
        props:['list'],
        //methods写在组件中，否则报错
        methods:{
            toggleTask:function (item) {
                item.completed = ! item.completed;
            },
            deleteTask:function (item,index) {
               this.list.splice(item,1);
            }
        },
        computed:{
            remaining:function () {
                return this.list.filter(function (item) {
                    return !item.completed;
                }).length;
            }
        }
    });

    new Vue({
        el:"#app",
        data:{
            tasks:[
                {body:"go to movie",completed:true}
                ,{body:"go to running",completed:false}
                ,{body:"go to parking",completed:true}
                ,{body:"go to drinking",completed:false}
                ,{body:"go to shopping",completed:true}
                ,{body:"go to learning",completed:false}
            ]
        },
    });

</script>

</body>
</html>